<template>
    <div class="warpper">
        <TopHeader class="inviteHeader" centerMsg="邀请新用户"/>
        <div class="content">
            <div class="mess">每邀请一位新用户即可获赠<span>1000</span>WKC，被邀请好友邀请好友也可获得额外奖励。</div>
            <div class="cont">
                <div class="img qrcodeImg">
                    <div id="qrcode"></div>
                </div>
                <div class="codeBox">
                    <div class="ti">邀请码</div>
                    <div class="num" >{{coinData.inviteCode}}</div>
                    <div class="copy btn " data-clipboard-text="232GY5" >复制</div>
                </div>
                <div class="btnShare">
                    <van-button class="copyLink" round block  :data-clipboard-text="inviteUrl" type="info">立即分享</van-button>
                </div>
                <div class="messBot">
                    奖励需被邀请人注册成功后，才会进入个人资产。
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {userInfo,withdrawal} from "@/utils/request"
    import TopHeader from '@/components/TopHeader.vue'
    import QRCode from 'qrcodejs2'
    import Clipboard from 'clipboard';
    import {mapState} from 'vuex'
    import Vue from 'Vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
    export default {
        name: "tbRecord",
        components: {
            TopHeader,
        },
        data () {
            return {
                inviteUrl: '',
                coinData: {

                }
            }
        },
        computed:{
            ...mapState([
            ]),

        },
        created() {
            this.init();
        },
        methods:{
            init() {
                userInfo().then(res => {
                    if (res.code === 200) {
                        this.coinData = res.data || {};
                        // url
                        this.inviteUrl = location.origin + '/#/register?inviteCode=' + this.coinData.inviteCode;
                        // 二维码
                        this.qrCode(this.inviteUrl);
                    } else {
                        Toast.fail(res.msg || '请求失败');
                    }
                });
                withdrawal().then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        this.listTb = res.rows || [];
                    } else {
                        Toast.fail(res.msg || '请求失败');
                    }
                });
                invite().then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        this.listYq = res.rows || [];
                    } else {
                        Toast.fail(res.msg || '请求失败');
                    }
                });
            },
            qrCode(url) {
                let qrcode = new QRCode('qrcode', {
                    width: 192, //图像宽度
                    height: 192, //图像高度
                    colorDark : "#000000", //前景色
                    colorLight : "#ffffff", //背景色
                    typeNumber:4,
                    correctLevel : QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
                })
                qrcode.clear() //清除二维码
                qrcode.makeCode(url) //生成另一个新的二维码
            }

        },
        mounted() {
            let clipboard = new Clipboard('.copy');
            clipboard.on('success', function(e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);
                Toast.success('邀请码复制成功');
                e.clearSelection();
            });
            let copyLink = new Clipboard('.copyLink');
            copyLink.on('success', function(e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);
                Toast.success('分享链接复制成功');
                e.clearSelection();
            });
        }
    }
</script>

<style scoped lang='less'>
    .warpper{
        padding-top: 3rem;
        padding-bottom: 22px;
        height: 100vh;
        background: linear-gradient(180deg, #359AE4 0%, #335CEC 76%, #4E70EB 100%);
    }
.content{
    height: 100%;
    padding: 0 20px;
    position: relative;
    padding-top: 86px;
    .mess{
        height: 86px;
        line-height: 28px;
        color: #eee;
        font-size: 15px;
        text-align: center;
        position: absolute;
        padding: 18px 4% 0;
        top: 0;
        right: 0;
        left: 0;
    }
    .cont{
        height: 100%;
        background: #fff;
        border-radius: 16px;
        padding-top: 38px;
        overflow: auto;
        .img{
            width: 54vw;
            height: 54vw;
            margin: auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .codeBox{
        text-align: center;
        padding: 25px 0 0 0 ;
        .ti{
            color: #333;
            font-size: 18px;
            margin-bottom: 14px;
        }
        .num{
            font-size: 28px;
            color: #DCA43C;
            margin-bottom: 14px;
        }
        .btn{
            font-size: 16px;
            color: #3373FF;
            cursor: pointer;
            padding: 0 10px;
        }
    }
    .btnShare{
        padding: 0 10%;
        margin-top: 20px;
    }
    .messBot{
        text-align: center;
        color: #999;
        font-size: 14px;
        margin-top: 16px;
        padding: 0 18px;
        line-height: 1.4;
        padding-bottom: 15px;
    }
}
.link{
    visibility: hidden;width: 0;height: 0;overflow:hidden;
}
</style>
<style lang="less">
    .inviteHeader{

    }
    .qrcodeImg {
        text-align: center;
        img {
            width: 100%;
            height: 100%;
            max-width: 100%;
        }
    }
</style>
